<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>第三节：movable-view组件 | 微信小程序</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-sijie-ff1a-icon-zu-jian.html" />
    
    
    <link rel="prev" href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-er-jieff1a-swiper-zu-jian.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="3.3"
        data-chapter-title="第三节：movable-view组件"
        data-filepath="di-san-zhang-ff1a-chang-yong-zu-jian/di-san-jie-ff1a-movable-view-zu-jian.md"
        data-basepath=".."
        data-revision="Tue Feb 12 2019 17:48:38 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="chapter1.html">
            
                
                    <a href="../chapter1.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        第一章：小程序前奏
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="chapter1/di-yi-jie-ff1a-ren-shi-xiao-cheng-xu.html">
            
                
                    <a href="../chapter1/di-yi-jie-ff1a-ren-shi-xiao-cheng-xu.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        第一节：认识小程序
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="chapter1/di-er-jie-ff1a-zhun-bei-gong-zuo.html">
            
                
                    <a href="../chapter1/di-er-jie-ff1a-zhun-bei-gong-zuo.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.</b>
                        
                        第二节：准备工作
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="chapter1/di-san-jie-ff1a-kai-fa-gong-ju-jie-shao.html">
            
                
                    <a href="../chapter1/di-san-jie-ff1a-kai-fa-gong-ju-jie-shao.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.</b>
                        
                        第三节：开发工具介绍
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="chapter1/di-liu-jie-ff1a-wxss-yu-fa.html">
            
                
                    <a href="../chapter1/di-liu-jie-ff1a-wxss-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.4.</b>
                        
                        第六节：WXSS语法
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        第二章：小程序基础
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-yi-jie-ff1a-kuang-jia-jie-shao.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-yi-jie-ff1a-kuang-jia-jie-shao.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.</b>
                        
                        第一节：项目结构
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-er-jie-ff1a-wxml-yu-fa.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-er-jie-ff1a-wxml-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.</b>
                        
                        第二节：配置
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-san-jie-ff1a-wxml-yu-fa.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-san-jie-ff1a-wxml-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.</b>
                        
                        第三节：WXML语法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.4" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-si-jie-ff1a-wxss-yu-fa.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-si-jie-ff1a-wxss-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.4.</b>
                        
                        第五节：事件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.5" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-liu-jie-ff1a-wxss-yu-fa.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-liu-jie-ff1a-wxss-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.</b>
                        
                        第六节：WXSS语法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.6" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-qi-jie-ff1a-flex-bu-ju.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-qi-jie-ff1a-flex-bu-ju.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.6.</b>
                        
                        第七节：flex布局
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.7" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-bajie-ff1a-app-sheng-ming-zhou-qi.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-bajie-ff1a-app-sheng-ming-zhou-qi.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.</b>
                        
                        第八节：APP对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-jiu-jie-ff1a-page-dui-xiang.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-jiu-jie-ff1a-page-dui-xiang.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.</b>
                        
                        第九节：Page对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.9" data-path="di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-shi-zhang-ff1a-wxs-yu-fa.html">
            
                
                    <a href="../di-er-zhang-ff1a-kai-fa-zhun-bei-gong-zuo/di-shi-zhang-ff1a-wxs-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.9.</b>
                        
                        第十节：WXS语法
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3" data-path="di-san-zhang-ff1a-chang-yong-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                        第三章：常用组件
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.1" data-path="di-san-zhang-ff1a-chang-yong-zu-jian/di-yi-jie-ff1a-shi-tu-rong-qi-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-yi-jie-ff1a-shi-tu-rong-qi-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.1.</b>
                        
                        第一节：scroll-view组件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2" data-path="di-san-zhang-ff1a-chang-yong-zu-jian/di-er-jieff1a-swiper-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-er-jieff1a-swiper-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.</b>
                        
                        第二节：swiper组件
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="3.3" data-path="di-san-zhang-ff1a-chang-yong-zu-jian/di-san-jie-ff1a-movable-view-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-san-jie-ff1a-movable-view-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.</b>
                        
                        第三节：movable-view组件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.4" data-path="di-san-zhang-ff1a-chang-yong-zu-jian/di-sijie-ff1a-icon-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-sijie-ff1a-icon-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.4.</b>
                        
                        第四节：icon组件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.5" data-path="di-san-zhang-ff1a-chang-yong-zu-jian/di-wu-jie-ff1a-text-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-wu-jie-ff1a-text-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.5.</b>
                        
                        第五节：text组件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.6" data-path="di-san-zhang-ff1a-chang-yong-zu-jian/di-liu-jie-ff1a-input-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-liu-jie-ff1a-input-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.6.</b>
                        
                        第六节：input组件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.7" data-path="di-san-zhang-ff1a-chang-yong-zu-jian/zi-ding-yi-zu-jian.html">
            
                
                    <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/zi-ding-yi-zu-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.7.</b>
                        
                        自定义组件
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4" >
            
            <span><b>4.</b> 第四章：小程序API</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="4.1" data-path="di-yi-jie-ff1a-wang-luo-qing-qiu-api.html">
            
                
                    <a href="../di-yi-jie-ff1a-wang-luo-qing-qiu-api.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.1.</b>
                        
                        第一节：网络请求API
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="5" data-path="di-liu-zhang-ff1a-es6-yu-fa.html">
            
                
                    <a href="../di-liu-zhang-ff1a-es6-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.</b>
                        
                        第五章：ES6语法
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="5.1" data-path="di-liu-zhang-ff1a-es6-yu-fa/di-yi-jie-ff1a-shi-yao-shi-es6-yu-fa.html">
            
                
                    <a href="../di-liu-zhang-ff1a-es6-yu-fa/di-yi-jie-ff1a-shi-yao-shi-es6-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.1.</b>
                        
                        第一节：什么是ES6语法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5.2" data-path="di-liu-zhang-ff1a-es6-yu-fa/di-er-jie-ff1a-es6-yu-fa.html">
            
                
                    <a href="../di-liu-zhang-ff1a-es6-yu-fa/di-er-jie-ff1a-es6-yu-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.2.</b>
                        
                        第二节：定义变量
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5.3" data-path="di-liu-zhang-ff1a-es6-yu-fa/di-san-jie-ff1a-han-shu.html">
            
                
                    <a href="../di-liu-zhang-ff1a-es6-yu-fa/di-san-jie-ff1a-han-shu.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.3.</b>
                        
                        第三节：函数
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5.4" data-path="di-liu-zhang-ff1a-es6-yu-fa/di-si-jie-ff1a-lei.html">
            
                
                    <a href="../di-liu-zhang-ff1a-es6-yu-fa/di-si-jie-ff1a-lei.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.4.</b>
                        
                        第四节：类
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5.5" data-path="di-liu-zhang-ff1a-es6-yu-fa/di-wu-jie-ff1a-mo-kuai.html">
            
                
                    <a href="../di-liu-zhang-ff1a-es6-yu-fa/di-wu-jie-ff1a-mo-kuai.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.5.</b>
                        
                        第五节：模块
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="6" data-path="di-wu-zhang-ff1a-yun-kai-fa.html">
            
                
                    <a href="../di-wu-zhang-ff1a-yun-kai-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.</b>
                        
                        第六章：云开发
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="6.1" data-path="di-yi-jie-ff1a-shi-yao-shi-yun-kai-fa.html">
            
                
                    <a href="../di-yi-jie-ff1a-shi-yao-shi-yun-kai-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.1.</b>
                        
                        第一节：什么是云开发
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.2" data-path="di-er-jie-ff1a-zhu-ce-wei-xin-xiao-cheng-xu.html">
            
                
                    <a href="../di-er-jie-ff1a-zhu-ce-wei-xin-xiao-cheng-xu.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.2.</b>
                        
                        第二节：注册微信小程序
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.3" data-path="di-san-jie-ff1a-kai-tong-yun-kai-fa.html">
            
                
                    <a href="../di-san-jie-ff1a-kai-tong-yun-kai-fa.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.3.</b>
                        
                        第三节：开通云开发
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.4" data-path="di-si-jie-ff1a-shu-ju-ku.html">
            
                
                    <a href="../di-si-jie-ff1a-shu-ju-ku.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.4.</b>
                        
                        第四节：数据库准备
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.5" data-path="di-wu-jie-ff1a-shu-ju-ku-cao-zuo.html">
            
                
                    <a href="../di-wu-jie-ff1a-shu-ju-ku-cao-zuo.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.5.</b>
                        
                        第五节：数据库操作
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.6" data-path="di-liu-jie-ff1a-command-zhi-ling.html">
            
                
                    <a href="../di-liu-jie-ff1a-command-zhi-ling.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.6.</b>
                        
                        第六节：command指令
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.7" data-path="di-qi-jie-ff1a-gao-ji-cha-xun.html">
            
                
                    <a href="../di-qi-jie-ff1a-gao-ji-cha-xun.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.7.</b>
                        
                        第七节：高级查询
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.8" data-path="di-ba-jie-ff1a-wen-jian-shang-chuan.html">
            
                
                    <a href="../di-ba-jie-ff1a-wen-jian-shang-chuan.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.8.</b>
                        
                        第八节：文件操作
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.9" data-path="di-jiu-jie-ff1a-node-huan-jing-da-jian.html">
            
                
                    <a href="../di-jiu-jie-ff1a-node-huan-jing-da-jian.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.9.</b>
                        
                        第九节：node环境搭建
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.10" data-path="di-shi-jie-ff1a-yun-han-shu.html">
            
                
                    <a href="../di-shi-jie-ff1a-yun-han-shu.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.10.</b>
                        
                        第十节：云函数
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.11" data-path="di-shi-yi-jie-ff1a-yun-han-shu-jian-ce-nei-rong-an-quan.html">
            
                
                    <a href="../di-shi-yi-jie-ff1a-yun-han-shu-jian-ce-nei-rong-an-quan.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.11.</b>
                        
                        第十一节：检测内容安全
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.12" data-path="di-shi-er-jie-ff1a-yun-han-shu-tu-pian-jian-huang.html">
            
                
                    <a href="../di-shi-er-jie-ff1a-yun-han-shu-tu-pian-jian-huang.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.12.</b>
                        
                        第十二节：图片鉴黄
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.13" data-path="di-shi-san-jie-ff1a-yong-hu-shou-quan.html">
            
                
                    <a href="../di-shi-san-jie-ff1a-yong-hu-shou-quan.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.13.</b>
                        
                        第十三节：用户授权
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6.14" data-path="di-shi-si-jie-ff1a-qi-ta-shou-quan-fang-shi.html">
            
                
                    <a href="../di-shi-si-jie-ff1a-qi-ta-shou-quan-fang-shi.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.14.</b>
                        
                        第十四节：其他授权方式
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../" >微信小程序</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h1 id="movableview&#x7EC4;&#x4EF6;">movable-view&#x7EC4;&#x4EF6;</h1>
<p>&#x6B63;&#x5E38;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x8BBE;&#x7F6E;&#x4E86;&#x540E;&#xFF0C;&#x5982;&#x679C;&#x4E0D;&#x901A;&#x8FC7;<code>js</code>&#x6216;&#x8005;<code>css</code>&#x52A8;&#x753B;&#xFF0C;&#x90A3;&#x4E48;&#x662F;&#x5F88;&#x96BE;&#x5B9E;&#x73B0;&#x79FB;&#x52A8;&#x7684;&#x3002;&#x5982;&#x679C;&#x6211;&#x4EEC;&#x6709;&#x4E9B;&#x7EC4;&#x4EF6;&#x8BBE;&#x7F6E;&#x5B8C;&#x6210;&#x540E;&#x60F3;&#x8981;&#x80FD;&#x591F;&#x79FB;&#x52A8;&#x3002;&#x90A3;&#x4E48;&#x6211;&#x4EEC;&#x5C31;&#x53EF;&#x4EE5;&#x501F;&#x52A9;<code>movable-view</code>&#x7EC4;&#x4EF6;&#x6765;&#x5B9E;&#x73B0;&#x3002;</p>
<p><code>movable-view</code>&#x7EC4;&#x4EF6;&#xFF0C;&#x6B63;&#x5982;&#x4ED6;&#x7684;&#x540D;&#x5B57;&#x4E00;&#x6837;&#xFF0C;&#x662F;&#x53EF;&#x4EE5;&#x79FB;&#x52A8;&#x7684;&#x5BB9;&#x5668;&#xFF0C;&#x4F46;&#x662F;&#x8FD9;&#x4E2A;&#x5BB9;&#x5668;&#x5FC5;&#x987B;&#x8981;&#x653E;&#x5728;<code>movable-area</code>&#x4E2D;&#x624D;&#x80FD;&#x79FB;&#x52A8;&#x3002;&#x56E0;&#x6B64;&#x5B9E;&#x9645;&#x4E0A;&#x662F;&#x8FD9;&#x4E24;&#x4E2A;&#x7EC4;&#x4EF6;&#x914D;&#x5408;&#x4F7F;&#x7528;&#x624D;&#x80FD;&#x5B9E;&#x73B0;&#x79FB;&#x52A8;&#x7684;&#x6548;&#x679C;&#x7684;&#x3002;&#x770B;&#x4EE5;&#x4E0B;&#x793A;&#x4F8B;&#x4EE3;&#x7801;&#xFF1A;</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">movable-area</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;area&quot;</span> <span class="hljs-attribute">scale-area</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">movable-view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&apos;view&apos;</span> <span class="hljs-attribute">direction</span>=<span class="hljs-value">&quot;all&quot;</span> <span class="hljs-attribute">inertia</span> <span class="hljs-attribute">out-of-bounds</span> <span class="hljs-attribute">damping</span>=<span class="hljs-value">&quot;10&quot;</span> <span class="hljs-attribute">friction</span>=<span class="hljs-value">&quot;0&quot;</span> <span class="hljs-attribute">scale</span>&gt;</span>&#x77E5;&#x4E86;&#x9EC4;&#x52C7;<span class="hljs-tag">&lt;/<span class="hljs-title">movable-view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">movable-area</span>&gt;</span>
</code></pre>
<pre><code class="lang-css"><span class="hljs-class">.area</span><span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">200px</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">200px</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> blue</span></span>;
}</span>

<span class="hljs-class">.area</span> <span class="hljs-class">.view</span><span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100px</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">100px</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> red</span></span>;
}</span>
</code></pre>
<h2 id="movableview&#x5E38;&#x7528;&#x5C5E;&#x6027;&#xFF1A;">movable-view&#x5E38;&#x7528;&#x5C5E;&#x6027;&#xFF1A;</h2>
<table>
<thead>
<tr>
<th>&#x5C5E;&#x6027;&#x540D;</th>
<th>&#x7C7B;&#x578B;</th>
<th>&#x9ED8;&#x8BA4;&#x503C;</th>
<th>&#x8BF4;&#x660E;</th>
<th>&#x6700;&#x4F4E;&#x7248;&#x672C;</th>
</tr>
</thead>
<tbody>
<tr>
<td>direction</td>
<td>String</td>
<td>none</td>
<td>movable-view&#x7684;&#x79FB;&#x52A8;&#x65B9;&#x5411;&#xFF0C;&#x5C5E;&#x6027;&#x503C;&#x6709;all&#x3001;vertical&#x3001;horizontal&#x3001;none</td>
<td></td>
</tr>
<tr>
<td>inertia</td>
<td>Boolean</td>
<td>false</td>
<td>movable-view&#x662F;&#x5426;&#x5E26;&#x6709;&#x60EF;&#x6027;</td>
<td></td>
</tr>
<tr>
<td>out-of-bounds</td>
<td>Boolean</td>
<td>false</td>
<td>&#x8D85;&#x8FC7;&#x53EF;&#x79FB;&#x52A8;&#x533A;&#x57DF;&#x540E;&#xFF0C;movable-view&#x662F;&#x5426;&#x8FD8;&#x53EF;&#x4EE5;&#x79FB;&#x52A8;</td>
<td></td>
</tr>
<tr>
<td>x</td>
<td>Number/String</td>
<td></td>
<td>&#x5B9A;&#x4E49;x&#x8F74;&#x65B9;&#x5411;&#x7684;&#x504F;&#x79FB;&#xFF0C;&#x5982;&#x679C;x&#x7684;&#x503C;&#x4E0D;&#x5728;&#x53EF;&#x79FB;&#x52A8;&#x8303;&#x56F4;&#x5185;&#xFF0C;&#x4F1A;&#x81EA;&#x52A8;&#x79FB;&#x52A8;&#x5230;&#x53EF;&#x79FB;&#x52A8;&#x8303;&#x56F4;&#xFF1B;&#x6539;&#x53D8;x&#x7684;&#x503C;&#x4F1A;&#x89E6;&#x53D1;&#x52A8;&#x753B;</td>
<td></td>
</tr>
<tr>
<td>y</td>
<td>Number/String</td>
<td></td>
<td>&#x5B9A;&#x4E49;y&#x8F74;&#x65B9;&#x5411;&#x7684;&#x504F;&#x79FB;&#xFF0C;&#x5982;&#x679C;y&#x7684;&#x503C;&#x4E0D;&#x5728;&#x53EF;&#x79FB;&#x52A8;&#x8303;&#x56F4;&#x5185;&#xFF0C;&#x4F1A;&#x81EA;&#x52A8;&#x79FB;&#x52A8;&#x5230;&#x53EF;&#x79FB;&#x52A8;&#x8303;&#x56F4;&#xFF1B;&#x6539;&#x53D8;y&#x7684;&#x503C;&#x4F1A;&#x89E6;&#x53D1;&#x52A8;&#x753B;</td>
<td></td>
</tr>
<tr>
<td>damping</td>
<td>Number</td>
<td>20</td>
<td>&#x963B;&#x5C3C;&#x7CFB;&#x6570;&#xFF0C;&#x7528;&#x4E8E;&#x63A7;&#x5236;x&#x6216;y&#x6539;&#x53D8;&#x65F6;&#x7684;&#x52A8;&#x753B;&#x548C;&#x8FC7;&#x754C;&#x56DE;&#x5F39;&#x7684;&#x52A8;&#x753B;&#xFF0C;&#x503C;&#x8D8A;&#x5927;&#x79FB;&#x52A8;&#x8D8A;&#x5FEB;</td>
<td></td>
</tr>
<tr>
<td>friction</td>
<td>Number</td>
<td>2</td>
<td>&#x6469;&#x64E6;&#x7CFB;&#x6570;&#xFF0C;&#x7528;&#x4E8E;&#x63A7;&#x5236;&#x60EF;&#x6027;&#x6ED1;&#x52A8;&#x7684;&#x52A8;&#x753B;&#xFF0C;&#x503C;&#x8D8A;&#x5927;&#x6469;&#x64E6;&#x529B;&#x8D8A;&#x5927;&#xFF0C;&#x6ED1;&#x52A8;&#x8D8A;&#x5FEB;&#x505C;&#x6B62;&#xFF1B;&#x5FC5;&#x987B;&#x5927;&#x4E8E;0&#xFF0C;&#x5426;&#x5219;&#x4F1A;&#x88AB;&#x8BBE;&#x7F6E;&#x6210;&#x9ED8;&#x8BA4;&#x503C;</td>
<td></td>
</tr>
<tr>
<td>disabled</td>
<td>Boolean</td>
<td>false</td>
<td>&#x662F;&#x5426;&#x7981;&#x7528;    1.9.90</td>
<td></td>
</tr>
<tr>
<td>scale</td>
<td>Boolean</td>
<td>false</td>
<td>&#x662F;&#x5426;&#x652F;&#x6301;&#x53CC;&#x6307;&#x7F29;&#x653E;&#xFF0C;&#x9ED8;&#x8BA4;&#x7F29;&#x653E;&#x624B;&#x52BF;&#x751F;&#x6548;&#x533A;&#x57DF;&#x662F;&#x5728;movable-view&#x5185;</td>
<td>1.9.90</td>
</tr>
<tr>
<td>scale-min</td>
<td>Number</td>
<td>0.5</td>
<td>&#x5B9A;&#x4E49;&#x7F29;&#x653E;&#x500D;&#x6570;&#x6700;&#x5C0F;&#x503C;</td>
<td>1.9.90</td>
</tr>
<tr>
<td>scale-max</td>
<td>Number</td>
<td>10</td>
<td>&#x5B9A;&#x4E49;&#x7F29;&#x653E;&#x500D;&#x6570;&#x6700;&#x5927;&#x503C;</td>
<td>1.9.90</td>
</tr>
<tr>
<td>scale-value</td>
<td>Number</td>
<td>1</td>
<td>&#x5B9A;&#x4E49;&#x7F29;&#x653E;&#x500D;&#x6570;&#xFF0C;&#x53D6;&#x503C;&#x8303;&#x56F4;&#x4E3A; 0.5 - 10</td>
<td>1.9.90</td>
</tr>
<tr>
<td>animation</td>
<td>Boolean</td>
<td>true</td>
<td>&#x662F;&#x5426;&#x4F7F;&#x7528;&#x52A8;&#x753B;</td>
<td>2.1.0</td>
</tr>
<tr>
<td>bindchange</td>
<td>EventHandle</td>
<td></td>
<td>&#x62D6;&#x52A8;&#x8FC7;&#x7A0B;&#x4E2D;&#x89E6;&#x53D1;&#x7684;&#x4E8B;&#x4EF6;&#xFF0C;event.detail = {x: x, y: y, source: source}&#xFF0C;&#x5176;&#x4E2D;source&#x8868;&#x793A;&#x4EA7;&#x751F;&#x79FB;&#x52A8;&#x7684;&#x539F;&#x56E0;&#xFF0C;&#x503C;&#x53EF;&#x4E3A;touch&#xFF08;&#x62D6;&#x52A8;&#xFF09;&#x3001;touch-out-of-bounds&#xFF08;&#x8D85;&#x51FA;&#x79FB;&#x52A8;&#x8303;&#x56F4;&#xFF09;&#x3001;out-of-bounds&#xFF08;&#x8D85;&#x51FA;&#x79FB;&#x52A8;&#x8303;&#x56F4;&#x540E;&#x7684;&#x56DE;&#x5F39;&#xFF09;&#x3001;friction&#xFF08;&#x60EF;&#x6027;&#xFF09;&#x548C;&#x7A7A;&#x5B57;&#x7B26;&#x4E32;&#xFF08;setData&#xFF09;</td>
<td>1.9.90</td>
</tr>
<tr>
<td>bindscale</td>
<td>EventHandle</td>
<td></td>
<td>&#x7F29;&#x653E;&#x8FC7;&#x7A0B;&#x4E2D;&#x89E6;&#x53D1;&#x7684;&#x4E8B;&#x4EF6;&#xFF0C;event.detail = {x: x, y: y, scale: scale}&#xFF0C;&#x5176;&#x4E2D;x&#x548C;y&#x5B57;&#x6BB5;&#x5728;2.1.0&#x4E4B;&#x540E;&#x5F00;&#x59CB;&#x652F;&#x6301;&#x8FD4;&#x56DE;</td>
<td>1.9.90</td>
</tr>
</tbody>
</table>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-er-jieff1a-swiper-zu-jian.html" class="navigation navigation-prev " aria-label="Previous page: 第二节：swiper组件"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../di-san-zhang-ff1a-chang-yong-zu-jian/di-sijie-ff1a-icon-zu-jian.html" class="navigation navigation-next " aria-label="Next page: 第四节：icon组件"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../gitbook/app.js"></script>

    
    <script src="../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
